<!DOCTYPE>
<html>
<head>
<title> 英语小游戏 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Generator" content="EditPlus">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<script src="js/jquery-1.9.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/drag.js"></script>

<script>


$(function(){

	$('.drag-box-5 .drag').each(function(index){
		$(this).myDrag({
			parent:'.test',
			randomPosition:false,
			direction:'all'
		});
	});

});
</script>

</head>
<body  style="background:#71a9e3;">
	<h1 style="color: #fff;">“There be” <span>Sentence Structure</span></h1>

	



	<div class='test'>
		<!--<i>test Box</i>-->
		<div class='drag-box drag-box-5'>

				<div class='drag drag-5' style="    left: 21%;
    top: 15%;">
					eight o'clock
				</div>

						<div class='drag drag-5' style="left: 50%; top: 32%">
							ten to six
							</div>
								<div class='drag drag-5' style="left: 72%; top: 50%">
									Monday
									</div>


												<div class='drag drag-5' style="left: 76%; top: 30%">
													Wednesday
													</div>

																<div class='drag drag-5' style="left: 39%;
    top: 59%;">
																	Saturday
																</div>

					<div class='drag drag-5' style="left:52%; top: 10%">
						January 1, 2019
					</div>
					<div class='drag drag-5' style="left: 67%;
    top: 26%;">
						February 2, 2001
					</div>



					<div class='drag drag-5' style="    left: 39%;
    top: 37%;">
						December 12, 2011
					</div>
					<div class='drag drag-5' style="    left: 48%;top: 20%;">
						Room 301
					</div>
					<div class='drag drag-5' style="left: 57%; top: 25.5%">
						Training Center
					</div>
					<div class='drag drag-5' style="left: 32%;
    top: 21%;">
						Hotel
					</div>
					<div class='drag drag-5' style="left: 33%; top: 45%">
						Lecture
					</div>
					<div class='drag drag-5' style="left: 24%; top: 35%">
						Hall
					</div>
					<div class='drag drag-5' style="left: 60%; top: 17%">
						Multimedia-room
					</div>
					<div class='drag drag-5' style="left: 32%; top: 38%;">
						Meeting
					</div>
					<div class='drag drag-5' style="left: 30%; top: 30% ">
						Safety
					</div>
					<div class='drag drag-5' style="left: 50%; top: 40%">
						Training
					</div>
					<div class='drag drag-5' style="left: 30%; top: 10% ">
						Fire drill
					</div>
					<div class='drag drag-5' style="left: 16%; top: 33% ">
						Earthquake drill
					</div>
					<div class='drag drag-5' style="left: 25%;top: 41%; ">
						Lecture
					</div>
					<div class='drag drag-5' style="left: 15%; top: 43%">
						seminar
					</div>







	</div>
			<div class="gulanbox">
				<div class="guolan">
					<p>Time</p>
				</div>
				<div class="guolan">
					<p>Place</p>
				</div>
				<div class="guolan">
					<p> Event</p>
				</div>
			</div>

</body>
</html>